<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="签到候诊"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<pBox @search="getWaitSee()" :search="true"></pBox>

			<view class="list tn-margin-top-sm" v-for="(item,index) in resultData" :key="index">
				<view class="list-item">
					<view class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
						<view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
							<text class="tn-icon-time-fill tn-color-black"></text>
							<text class="tn-color-black">前方还有 {{ item.waitNumber}} 人就诊</text>
						</view>
						<view>
							<view class="justify-content-item ">
								<tn-tag v-if="item.isSignIn" backgroundColor="tn-main-gradient-dawn" fontColor="#FFFFFF" shape="circleLeft"
									width="auto">
									已签到
								</tn-tag>
								<tn-tag v-else backgroundColor="#838383" fontColor="#FFFFFF" shape="circleLeft"
									width="auto">
									未签到
								</tn-tag>
							</view>
						</view>
					</view>
					<view class="dawn-line"></view>
					<view class="list-content tn-flex tn-flex-col-center tn-flex-row-between">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="tn-flex tn-flex-col-center">
								<view style="min-width: 80px;" class="dawn-radius tn-padding-sm tn-text-ellipsis tn-text-center"
									:class="item.isSignIn?'tn-bg-dawn':'tn-bg-dawn-gray'">
									<view>
										{{item.patientName}}
									</view>
									<view class="tn-margin-top-ss" style="height: 18px;">
										第 {{item.callNum || '-' }} 号
									</view>
								</view>
							</view>
							<view class="tn-padding-left-xs">
								<view class="">
									<text
										class="dawn-text-md tn-text-bold tn-color-dawn">{{item.queueName || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<tn-tag
										class="dawn-tag-sm dawn-tag-sm__2">{{item.state || '' }}</tn-tag>
								</view>
								
								<view class="">
									<text class="dawn-text-sm tn-margin-right-ss">就诊时段</text>
									<text
										class="tn-color-red--dark tn-text-bold tn-padding-left-ss">{{ item.jiuzhenTime  || '-' }}</text>
								</view>
								<view class="">
									<text class="dawn-text-sm tn-margin-right-ss">就诊地址</text>
									<text class="dawn-text-sm tn-text-bold">{{ item.queueAddress }}</text>
								</view>
							</view>
						</view>
						<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
							<view class="justify-content-item tn-text-right">
								<text class="tn-icon-right tn-color-gray"></text>
							</view>
						</view>
					</view>
					<view class="dawn-line" v-if="!item.isSignIn"></view>
					<view v-if="!item.isSignIn"
						class=" tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="justify-content-item tn-text-df">
							
						</view>
						<view 
							class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
							<tn-button @click="onShowBox(item)" size="sm" class="dawn-btn-sm dawn-btn-sm__info">
								<text class="tn-icon-video-fill"></text>
								<text class="tn-padding-left-ss">签到</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="articleInfo.id" class="tn-bg-white dawn-radius dawn-shadow tn-margin-top-sm">
				<view class="list-icon-text">
					<view class="list__left">
						<image v-if="articleInfo.coverImg" style="height: 50rpx;width: 50rpx;"
							:src="articleInfo.coverImg" mode="aspectFit">
						</image>
						<view class="list__left__text tn-margin-left-ss">{{ articleInfo.title || '签到候诊须知' }}</view>
					</view>
				</view>
				<view>
					<scroll-view scroll-y="true">
						<view class='conters'>
							<parser :html="articleInfo.content" ref="article"></parser>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
			

			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button @click="getWaitSee()" class="dawn-btn-lg dawn-btn-lg__main">
						<text class="tn-icon-search-list-fill tn-padding-right-xs"></text>
						<text>查 询</text>
					</tn-button>
				</view>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<tn-popup v-model="showBox" mode="center" width="80%" :borderRadius="borderRadius">
			<view class="content">
				<tn-list-cell>
					<view class="tn-text-center">
						<text class="dawn-text-lg dawn-color">{{ articleInfo.title || '签到候诊须知' }}</text>
					</view>
				</tn-list-cell>
				<scroll-view scroll-y="true">
					<view class='conters'>
						<parser :html="articleInfo.content" ref="article"></parser>
					</view>
				</scroll-view>
				<view
					class="tn-flex tn-flex-row-center tn-flex-col-center tn-width-full tn-padding-top tn-padding-bottom">
					<tn-button @click="onSignIn(signInItem)" class="dawn-btn-lg dawn-btn-lg__info">
						<text class="tn-icon-check tn-padding-right-xs"></text>
						<text>我已阅读并同意</text>
					</tn-button>
				</view>
			</view>
		</tn-popup>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as RegisterApi from "@/api/hospital/register.js";
	import * as PatientApi from '@/api/hospital/patient.js';
	import * as ArticleApi from '@/api/cms/article.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				borderRadius: 40,
				loading: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				articleInfo: {},
				showBox: false,
				resultData: [],
				list: [],
				signInItem:{}
			}
		},
		onLoad(options) {
			console.info("query onLoad")
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				this.init();
				this.$nextTick(() => {
					// this.getWaitSee();
				})
			}
		},
		methods: {
			init() {
				let that = this;
				ArticleApi.getArticlePage({
					categoryKey: config.CMS_TYPE.SIGN_IN
				}).then(res => {
					console.table(res)
					if (res.code === 0) {
						const l = res.data.list || [];
						if (l.length > 0) {
							that.$set(this, 'articleInfo', l[0]);
						}
					}
				});
			},
			onShowBox(item) {
				this.signInItem = item;
				if (this.articleInfo.id) {
					this.showBox = true;
				} else {
					this.onSignIn(item);
				}
			},
			getWaitSee: function() {
				if (!this.patientInfo.id) {
					this.show = true;
					this.msg = '请先添加就诊人！';
					return;
				}
				let that = this;
				this.showBox = false;
				this.loading = true;
				this.show = false;
				this.resultData = [];
				RegisterApi.waitSee({
					"patientId": this.patientInfo.patientId,
					"patientName": this.patientInfo.name
				}).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						that.resultData = res.data;
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
					that.msg = res.message;
				})
			},
			onSignIn: function(item) {
				console.table(this.orderInfo);
				let that = this;
				this.showBox = false;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';

				RegisterApi.signIn({
					"patientId": this.patientInfo.patientId,
					"patientName": this.patientInfo.name,
					"registerNo": item.id
				}).then(res => {
					console.table(res);
					that.loading = false;
					if (res.code === 0) {
						this.$util.Tips({
							title: '签到成功'
						});
						that.getWaitSee();
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
					that.msg = res.message;
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		padding: 0rpx 20rpx;
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 15rpx;
		border-bottom: 1px solid $dawn-line-color;
	}

	::v-deep .tn-index-list__sidebar {
		right: 20rpx;
	}

	::v-deep .tn-index-list__sidebar__item {
		font-size: $dawn-font-size-xl;
	}

	::v-deep .tn-index-anchor {
		font-size: $dawn-font-size-md;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		color: #080808;
		font-weight: bolder;
		line-height: 1.2;
		background-color: $dawn-page-bg;
	}

	::v-deep .tn-index-anchor--active {
		color: #080808;
	}
</style>